<!DOCTYPE html>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<style>
  #sibling { background-color: red }
  input:in-range + #sibling { background-color: green }
</style>
<div>
  <input id="input" type="number" min="1" max="10" value="20">
  <span id="sibling">This text should have a green background</span>
</div>
<script>
  test(() => {
    assert_equals(getComputedStyle(sibling).backgroundColor, "rgb(255, 0, 0)",
        "Sibling background initially red.");
    input.setAttribute("value", "5");
    assert_equals(getComputedStyle(sibling).backgroundColor, "rgb(0, 128, 0)",
        "Sibling green after input value becomes in range.");
  }, "Check that input.setAttribute('value') affects :in-range");
</script>
